<template>
    <div class="view">
        <div class="title">
            <h2>发布新闻</h2>
        </div>
        <div class="content">
            <el-form :model="value" label-width="80px" ref="form" size="mini">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="value.title"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <editor :initVal="value.content" ref="editor"></editor>
                </el-form-item>
                <!-- 标签 -->
                <el-form-item label="标签" prop="tagId">
                    <el-select v-model="value.tagId" placeholder="请选择">
                        <el-option
                            v-for="item in vuelues_tag"
                            :key="item.tagId"
                            :label="item.tagName"
                            :value="item.tagId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="value.status" placeholder="请选择">
                        <el-option label="草稿" value="draft"></el-option>
                        <el-option label="已发布" value="published"></el-option>
                        <el-option label="已归档" value="archived"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add">发布</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        
    </div>
  </template>

  
  <script>
  import { addapi } from "@/api/news";
  import { getapi } from "@/api/tag";

  import editor from "vue2-mditor";
  export default {
    name: 'addNews',
    components: {
        editor
    },
    data() {
        return {
            value:{
                title:'',
                content:'',
                status: '', // 有'draft','published','archived'三种状态，分别是草稿，已发布，已归档
                tagId: '',
            },
            vuelues_tag: [],
        };
    },
    created() {
        this.get();
    },
    methods: {
        get() {
            getapi(
                1,
                100
            ).then(res => {
                this.vuelues_tag = res.data.tag
            });
        },
        add() {
            // 获取编辑器内容
            this.value.content = this.$refs.editor.getValue();
            addapi(this.value).then(res => {
                if (res.code !== 20000) {
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                    return;
                }
                this.$router.push("/news");
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();

        }
    }

    
  }
  </script>
  
  <style lang="scss" scoped>
    .view {
        padding: 20px;
    }

    .view {
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: relative;
        padding-left: 80px;
        padding-right: 80px;
    }


    h2 {
        font-size: 25px;
        font-weight: 900;
        color: #397ddc;
        margin-bottom: 20px;
    }

  </style>